<template>
  <div class="about-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="about-card">
          <template #header>
            <div class="card-header">
              <el-icon><InfoFilled /></el-icon>
              <span>关于我们</span>
            </div>
          </template>
          
          <div class="about-content">
            <div class="logo-section">
              <img src="@/assets/logo.svg" alt="系统Logo" class="system-logo" />
              <h1>医学文献智能识别与检索系统</h1>
              <p class="version">v1.0.0</p>
            </div>
            
            <div class="description-section">
              <h2>系统简介</h2>
              <p>
                医学文献智能识别与检索系统是一个专为医学研究人员设计的智能化文献管理平台。
                系统集文献上传、智能识别、全文检索、数据可视化等功能于一体，帮助用户高效地
                管理和利用医学文献资源。
              </p>
            </div>
            
            <div class="features-section">
              <h2>核心功能</h2>
              <el-row :gutter="20">
                <el-col :span="8" :xs="24">
                  <div class="feature-item">
                    <el-icon class="feature-icon" color="#409eff"><Upload /></el-icon>
                    <h3>智能文献识别</h3>
                    <p>支持PDF、图片等多种格式文献的自动识别和内容提取</p>
                  </div>
                </el-col>
                <el-col :span="8" :xs="24">
                  <div class="feature-item">
                    <el-icon class="feature-icon" color="#67c23a"><Search /></el-icon>
                    <h3>全文检索</h3>
                    <p>基于关键词、作者、期刊等多维度的智能检索功能</p>
                  </div>
                </el-col>
                <el-col :span="8" :xs="24">
                  <div class="feature-item">
                    <el-icon class="feature-icon" color="#e6a23c"><PieChart /></el-icon>
                    <h3>数据可视化</h3>
                    <p>提供丰富的图表展示文献统计和分析结果</p>
                  </div>
                </el-col>
              </el-row>
            </div>
            
            <div class="tech-section">
              <h2>技术架构</h2>
              <el-row :gutter="20">
                <el-col :span="12" :xs="24">
                  <div class="tech-stack">
                    <h3>后端技术栈</h3>
                    <ul>
                      <li><el-tag type="success">Spring Boot 2.7.15</el-tag></li>
                      <li><el-tag type="success">Spring Cloud 2021.0.8</el-tag></li>
                      <li><el-tag type="success">MyBatis Plus</el-tag></li>
                      <li><el-tag type="success">MySQL 8.0</el-tag></li>
                      <li><el-tag type="success">Redis</el-tag></li>
                      <li><el-tag type="success">RabbitMQ</el-tag></li>
                    </ul>
                  </div>
                </el-col>
                <el-col :span="12" :xs="24">
                  <div class="tech-stack">
                    <h3>前端技术栈</h3>
                    <ul>
                      <li><el-tag type="primary">Vue 3</el-tag></li>
                      <li><el-tag type="primary">Element Plus</el-tag></li>
                      <li><el-tag type="primary">TypeScript</el-tag></li>
                      <li><el-tag type="primary">Vite</el-tag></li>
                      <li><el-tag type="primary">ECharts</el-tag></li>
                      <li><el-tag type="primary">Axios</el-tag></li>
                    </ul>
                  </div>
                </el-col>
              </el-row>
            </div>
            
            <div class="team-section">
              <h2>开发团队</h2>
              <el-row :gutter="20">
                <el-col :span="8" :xs="24">
                  <div class="team-member">
                    <el-avatar :size="60" icon="User" />
                    <h3>黄文杰</h3>
                    <p>项目负责人 & 后端开发</p>
                  </div>
                </el-col>
                <el-col :span="8" :xs="24">
                  <div class="team-member">
                    <el-avatar :size="60" icon="User" />
                    <h3>黄涵</h3>
                    <p>前端开发工程师</p>
                  </div>
                </el-col>
                <el-col :span="8" :xs="24">
                  <div class="team-member">
                    <el-avatar :size="60" icon="User" />
                    <h3>胡圣鑫</h3>
                    <p>UI设计师</p>
                  </div>
                </el-col>
              </el-row>
            </div>
            
            <div class="contact-section">
              <h2>联系我们</h2>
              <el-row :gutter="20">
                <el-col :span="8" :xs="24">
                  <div class="contact-item">
                    <el-icon><Message /></el-icon>
                    <h3>邮箱</h3>
                    <p>3186258041@qq.com</p>
                  </div>
                </el-col>
                <el-col :span="8" :xs="24">
                  <div class="contact-item">
                    <el-icon><Phone /></el-icon>
                    <h3>电话</h3>
                    <p>130-7794-3136</p>
                  </div>
                </el-col>
                <el-col :span="8" :xs="24">
                  <div class="contact-item">
                    <el-icon><Location /></el-icon>
                    <h3>地址</h3>
                    <p>江西省南昌市丰和南路696号南昌航空大学</p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { 
  InfoFilled, Upload, Search, PieChart, 
  Message, Phone, Location, User 
} from '@element-plus/icons-vue'
</script>

<style scoped>
.about-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.about-card {
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.card-header {
  font-weight: bold;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.about-content {
  padding: 20px 0;
}

.logo-section {
  text-align: center;
  margin-bottom: 40px;
}

.system-logo {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

.logo-section h1 {
  color: #303133;
  margin-bottom: 10px;
}

.version {
  color: #909399;
  font-size: 16px;
}

.description-section,
.features-section,
.tech-section,
.team-section,
.contact-section {
  margin-bottom: 40px;
}

.description-section h2,
.features-section h2,
.tech-section h2,
.team-section h2,
.contact-section h2 {
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.description-section p {
  font-size: 16px;
  line-height: 1.6;
  color: #606266;
}

.feature-item {
  text-align: center;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
  transition: transform 0.3s;
}

.feature-item:hover {
  transform: translateY(-5px);
}

.feature-icon {
  font-size: 40px;
  margin-bottom: 15px;
}

.feature-item h3 {
  margin: 0 0 10px 0;
  color: #303133;
}

.feature-item p {
  color: #909399;
  font-size: 14px;
  margin: 0;
}

.tech-stack h3 {
  margin: 0 0 15px 0;
  color: #303133;
}

.tech-stack ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tech-stack li {
  margin-bottom: 10px;
}

.team-member {
  text-align: center;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.team-member h3 {
  margin: 15px 0 5px 0;
  color: #303133;
}

.team-member p {
  color: #909399;
  margin: 0;
}

.contact-item {
  text-align: center;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.contact-item .el-icon {
  font-size: 30px;
  color: #409eff;
  margin-bottom: 10px;
}

.contact-item h3 {
  margin: 0 0 5px 0;
  color: #303133;
}

.contact-item p {
  color: #909399;
  margin: 0;
}

@media (max-width: 768px) {
  .about-container {
    padding: 10px;
  }
  
  .el-col {
    margin-bottom: 20px;
  }
  
  .feature-item,
  .team-member,
  .contact-item {
    margin-bottom: 15px;
  }
}
</style>